@import 'variables'
@import 'nib'
@import 'mixins'

legend-row-height = 32px

.legend
  background-color: #EEF1F8
  display: table-row

  .row-toggle
    float: right
    display: block
    width: legend-row-height
    height: legend-row-height
    line-height: legend-row-height
    text-align: center
    cursor: pointer
    display: none

  .token
    .count
      font-weight: normal

  .caption
    float: left
    margin-right: 5px
    font-size: 12px
    font-weight: bold
    line-height: 21px

  .legend-row
    border-bottom: 1px solid #e6e9ef
    &.contracted
      max-height: legend-row-height
      overflow: hidden

  .legend-row > ul
    padding: 7px 9px 0px 10px
    > li
      display: inline-block
      margin-bottom: 3px
      &.faded
        opacity: 0.3
      .preview
        preview-size = 29px
        float: left
        border-radius: 50%
        display: inline-block
        width: preview-size
        height: preview-size
        margin-right: 8px
        .shade
          stretch()
          background-color: #fff
          width: (preview-size / 2px)
          opacity: 0.10

      .contents
        //overflow: hidden
        float: left
        line-height: 1em
        position: relative
        top: 3px
        top: -1px
      .remove
        display: none
        padding: 2px 8px
        margin-left: 12px
      &:hover .remove
          display: inline-block
